import React, { useEffect, useRef, useState } from "react";
import * as echarts from "echarts";

const ActivityChart = () => {
  const chartRef = useRef(null);
  const [currentYear] = useState(new Date().getFullYear());
  useEffect(() => {
    const chartInstance = echarts.init(chartRef.current);

    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: { type: "line" },
        formatter: function (params) {
          const month = params[0].axisValue;
          let html = `<div style="margin-bottom: 5px; font-weight: bold">${currentYear}/${month}</div>`;
          params.forEach(item => {
            html += `
              <div style="display: flex; align-items: center; margin: 2px 0">
                <div style="
                  width: 10px;
                  height: 10px;
                  background: ${item.color};
                  margin-right: 8px;
                  border-radius: 2px">
                </div>
                ${item.seriesName}: ${item.value}%
              </div>
            `;
          });
          return html;
        }
      },
      legend: {
        data: ["系统活跃度", "用户活跃度"],
        right: 10,
        textStyle: { color: "#666",fontSize: 16, },
      },
      grid: {
        left: '3%',    // 左边距
        right: '3%',   // 右边距
        bottom: "5%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        axisLabel: {
          color: '#808080', 
          fontSize: 16,
          // fontWeight: 'bold'
          
        },
        axisLine: { lineStyle: { color: "#ddd" } },
      },
      yAxis: {
        type: "value",
        name:"活跃度",
        nameTextStyle: {
          fontSize: 17,
          padding: [0, 0, 0, -22] // 调整文字位置 [上, 右, 下, 左]
        },
        axisLabel: {
          color: '#808080', 
          fontSize: 16,
          // fontWeight: 'bold'
        },
        splitLine: { lineStyle: { type: "dashed", color: "#ddd" } },
      },
      series: [
        {
          name: "系统",
          type: "line",
          smooth: false,
          data: [50, 60, 70, 82, 60, 72, 80, 90, 78, 85, 88, 92],
          color: "#006DFF",
          symbol: "none",
          symbolSize: 6,
          itemStyle: { borderWidth: 2 },
        },
        {
          name: "用户",
          type: "line",
          smooth: false,
          data: [30, 40, 50, 57, 45, 50, 55, 60, 58, 62, 65, 70],
          color: "#36CFC9",
          symbol: "none",
          symbolSize: 6,
          itemStyle: { borderWidth: 2 },
        },
      ],
    };

    chartInstance.setOption(option);

    return () => {
      chartInstance.dispose();
    };
  }, []);

  return (
<div style={{ 
  display: "flex",
  flexDirection: "column",
  alignItems: "flex-start", // 整体左对齐
  marginLeft: "-5px",
  padding: "10px",
  borderRadius: "8px",
  gap: "20px",
  width: "100%" // 添加宽度约束
}}>
  {/* 标题 */}
  <h2 style={{ 
    fontSize: "20px",
    fontWeight: "bold",
    margin: 0,
    fontWeight: 'bold'
  }}>
    活跃度
  </h2>

    {/* 内容容器 - 保持水平排列 */}
    <div style={{ 
      display: "flex",
      gap: "10px",
      width: "100%" // 重要：让容器占满父级宽度
    }}>
      <div style={{ width: "420px", marginLeft:"2px" }}>
        <div style={{ padding: "10px", fontFamily: 'SimSun',background: "#F9FAFB", borderRadius: "8px", height:"150px"}}>
          <p style={{ fontSize: "18px",marginTop:'1px', fontWeight: 'bold', marginBottom: "7px"  }}>系统活跃度</p>
          <p style={{ fontSize: "16px", fontWeight: 'normal', marginBottom: "25px"  }}>登录次数</p>
          <p style={{ fontSize: "24px", fontWeight: "bold", marginTop: "20px"   }}>100</p>
        </div>
        <div style={{ marginTop:'20px', padding: "10px", fontFamily: 'SimSun', background: "#F9FAFB", borderRadius: "8px", height:"150px" }}>
          <p style={{ fontSize: "18px",marginTop:'1px', fontWeight: 'bold', marginBottom: "7px"  }}>用户活跃度</p>
          <p style={{ fontSize: "16px", fontWeight: 'normal', marginBottom: "25px"  }}>登录用户数</p>
          <p style={{ fontSize: "24px", fontWeight: "bold" }}>30</p>
        </div>
      </div>

      {/* 右侧折线图 */}
      <div ref={chartRef} style={{ 
        // marginLeft:"-20px",
        height: "305px",
        width:'1300px',
        position: "relative",  // 添加定位上下文
        alignItems: "flex-start", // 整体左对齐
        minWidth: "900px", // 防止图表过小
        marginLeft:"20px"
    }} />
    </div>
    </div>
  );
};

export default ActivityChart;